<template>
  <el-dialog
    title="匹配结果"
    width="780px"
    :visible="visible"
    :append-to-body="true"
    @close="handleClose"
  >
    <el-button
      v-if="isShop"
      type="primary"
      class="mb20"
      @click="handleCreate(keyword)"
    >
      新建患者
    </el-button>
    <el-table v-loading="loading" stripe border :data="userList">
      <el-table-column label="头像" align="center" min-width="60">
        <template slot-scope="scope">
          <avatar-image :patient="scope.row" />
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="name" min-width="100">
        <template slot-scope="scope">
          <div style="cursor: pointer" @click="userDetails(scope.row)">
            {{ scope.row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" min-width="180">
        <template slot-scope="scope">
          <hover-phone
            v-if="scope.row.isTemporary === 1 || scope.row.isTemporary === 0"
            :items="scope.row"
            :type="1"
          />
          <hover-phone v-else :items="scope.row" />
        </template>
      </el-table-column>
      <el-table-column label="门店" align="center"></el-table-column>
      <el-table-column label="年龄" align="center" prop="age"></el-table-column>
      <el-table-column label="性别" align="center">
        <template slot-scope="scope">
          {{ sexEnum[scope.row.sex] }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="isShop"
        label="操作"
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.isTemporary === 1">
            <el-button type="text" @click="handleSubmit(scope.row, '老客')">
              重咨
            </el-button>
            <el-button type="text" @click="handleSubmit(scope.row, '复诊')">
              复诊
            </el-button>
          </template>
          <el-button
            v-else-if="scope.row.isTemporary === 0"
            type="text"
            @click="handlePatient(scope.row)"
          >
            初到
          </el-button>
          <el-button v-else type="text" @click="handleMarket(scope.row)">
            初到
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page="queryParams.pageNum"
      :limit="queryParams.pageSize"
      @pagination="handleQueryParams"
    ></pagination>
    <template slot="footer">
      <el-button @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { userMatcherRequest } from '@/api/services/common'
import {
  SAVE_KEYWORD,
  SAVE_VISIBLE,
  SAVE_QUERY_PARAMS,
} from '@/store/modules/userMatcher'
import { sexEnum } from '@/utils/enums'
import avatarImage from '@/components/yiya/avatarImage'
import hoverPhone from '@/components/yiya/hoverPhone'
import { encode, decode } from '@/utils/utils'

export default {
  name: 'SelectUser',
  components: {
    avatarImage,
    hoverPhone,
  },
  props: {
    containsTempClinicPerson: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      userList: [],
      total: 0,
      isShop: false,
      userPath: ['/shop', '/tc', '/doctor'],
    }
  },
  computed: {
    ...mapState({
      visible: (state) => state.userMatcher.visible,
      keyword: (state) => state.userMatcher.keyword,
      queryParams: (state) => state.userMatcher.queryParams,
      globalWhiteList: (state) => state.userMatcher.globalWhiteList,
    }),
    sexEnum() {
      return sexEnum
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.userMatcherRequest()
      } else {
        this.handleClose()
      }
    },
  },
  methods: {
    userDetails(row) {
      if (row.isTemporary === 1 || row.isTemporary === 0) {
        //临时或者到店
        const menu = this.$route.path.slice(
          0,
          this.$route.path.lastIndexOf('/')
        )
        if (this.userPath.indexOf(menu) !== -1) {
          this.goPath(menu, row.id)
        } else {
          this.goMarketPath(row.id, row.marketReservationId)
        }
      } else {
        //市场人员
        this.goMarketPath(row.id, '')
      }
    },
    judgeRouterPath() {
      try {
        const redirect = decode(this.$route.query.redirect)
        if (`${redirect.path}` !== this.$route.path) {
          return `${redirect.path}`
        } else {
          return this.$route.path
        }
      } catch (error) {
        return this.$route.path
      }
    },
    goPath(menu, id) {
      const path = this.judgeRouterPath()
      this.$router.push(
        `${menu}/details?id=${id}&redirect=${encode({
          path,
          query: this.queryParams,
        })}`
      )
    },
    goMarketPath(id, marketId) {
      const path = this.judgeRouterPath()
      this.$router.push(
        `/userMessageHandle/userHandle?id=${id}&marketId=${marketId}&redirect=${encode(
          {
            path,
            query: this.queryParams,
          }
        )}`
      )
    },
    judgePath() {
      const menu = this.$route.path.slice(0, this.$route.path.lastIndexOf('/'))
      if (this.globalWhiteList.indexOf(menu) !== -1) {
        //判断是否在到店路径
        this.isShop = true
      } else {
        this.isShop = false
      }
    },
    handleClose() {
      this.$store.dispatch('userMatcher/initUserMatcher')
    },
    async userMatcherRequest() {
      this.judgePath()
      try {
        this.loading = true
        const { list } = await userMatcherRequest({
          // ...this.queryParams,
          keyword: this.keyword,
          tem: this.isShop,
        })
        this.userList = list
      } finally {
        this.loading = false
      }
    },
    handleCreate(phoneNumber) {
      this.handleClose()
      this.$emit('create', phoneNumber)
    },
    handlePatient(patient) {
      this.handleClose()
      this.$emit('patient', patient)
    },
    handleMarket(market) {
      this.handleClose()
      this.$emit('market', market)
    },
    handleSubmit(patient, type) {
      this.handleClose()
      this.$emit('submit', patient, type)
    },
    handleQueryParams(query) {
      this.$store.commit({
        type: `userMatcher/${SAVE_QUERY_PARAMS}`,
        value: query,
      })
      this.userMatcherRequest()
    },
  },
}
</script>

<style scoped></style>
